<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Hzl
 * @LastEditTime: 2021-09-22 20:18:19
-->
<template>
<!-- 创建图表容器 容纳图表 -->
  <div ref='root' style="height:150px">
    
  </div>
</template>

<script>
import { Gauge } from '@antv/g2plot';
//1.引入组件
export default {
  data(){
    return{
      percent:0
    }
  },

  mounted(){
    this.initCharts();
  },
  methods:{
    initCharts(){ 
      const ticks = [0, 1 / 3, 2 / 3, 1];
      const color = ['#F4664A', '#FAAD14', '#30BF78'];
      //3.创建一个仪表盘实例对象
      let gauge = new Gauge(this.$refs['root'],{
        percent : this.percent,
        range: {
          ticks: [0, 1],
          color: ['l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78'],
        },
        indicator: {
          pointer: {
            style: {
              stroke: '#D0D0D0',
            },
          },
          pin: {
            style: {
              stroke: '#D0D0D0',
            },
          },
        },
        statistic: {
          title: {
            formatter: ({ percent }) => {
              if (percent < ticks[1]) {
                return '差';
              }
              if (percent < ticks[2]) {
                return '中';
              }
              return '优';
            },
            style: ({ percent }) => {
              return {
                fontSize: '36px',
                lineHeight: 1,
                color: percent < ticks[1] ? color[0] : percent < ticks[2] ? color[1] : color[2],
              };
            },
          },
          content: {
            offsetY: 36,
            style: {
              fontSize: '24px',
              color: '#4B535E',
            },
            formatter: () => '',
          },
        },
      });
      //4.渲染
      gauge.render();
      setInterval(()=>{
        if(this.percent<0.75){
          this.percent +=0.01;
          gauge.changeData(this.percent)
        }else{
          this.percent=0.75;
        }
      },10)
    }
  }
}
</script>